<template>
	<div class="time-text">{{ timeText }}</div>
	<div class="time">
		<b id="tian">{{ days }}天</b>
		<b id="shi">{{ hours }}时</b>
		<b id="fen">{{ minutes }}分</b>
		<b id="miao">{{ seconds }}秒</b>
	</div>
</template>

<script>
export default {
	name: "TimeDisplay",
	data() {
		return {
			timeText: "",
			days: 0,
			hours: 0,
			minutes: 0,
			seconds: 0,
			timer: null,
		}
	},
	mounted() {
		this.calculateTime()
		this.timer = setInterval(this.calculateTime, 1000)
	},
	beforeUnmount() {
		if (this.timer) {
			clearInterval(this.timer)
		}
	},
	methods: {
		calculateTime() {
			// 设置开始日期（可以根据后端数据动态设置）
			const startDate = new Date("2023-06-11T00:09:00")
			const now = new Date()

			const timeDiff = now.getTime() - startDate.getTime()
			const daysDiff = timeDiff / (1000 * 60 * 60 * 24)

			this.days = Math.floor(daysDiff)
			this.hours = Math.floor((daysDiff - this.days) * 24)
			this.minutes = Math.floor(
				((daysDiff - this.days) * 24 - this.hours) * 60
			)
			this.seconds = Math.floor(
				(((daysDiff - this.days) * 24 - this.hours) * 60 -
					this.minutes) *
					60
			)

			// 格式化当前时间显示
			this.timeText = `这是我们一起走过的`

			// 秒数补零
			if (this.seconds < 10) {
				this.seconds = "0" + this.seconds
			}
		},
	},
}
</script>

<style scoped>
.time {
	text-align: center;
	padding: 1rem 0;
	font-size: 2.5rem;
	color: #000;
}

.time b {
	margin: 0 0.5rem;
	color: #000;
}

.time-text {
	text-align: center;
	font-size: 1.8rem;
	line-height: 5rem;
	display: block;
	background-image: linear-gradient(
		270deg,
		#ff4500,
		#ffa500,
		#ffd700,
		#90ee90,
		#00ffff,
		#1e90ff,
		#9370db,
		#ff69b4,
		#ff4500
	);
	-webkit-background-clip: text;
	color: #0000;
	animation: jianbian 60s linear infinite;
	font-family: "Noto Serif SC", serif;
	font-weight: 700;
}
@keyframes jianbian {
	to {
		background-position: -2000rem;
	}
}
</style>
